<template>
	<view :style="{height:topHeight+navHeight+'px'}">
		<view class="nav-box" :style="{background:background,zIndex:zIndex}">
			<view class="nav-top" :style="{paddingTop:topHeight+'px'}"></view>
			<view class="nav-content flex-row-center" :style="{height:navHeight+'px'}">
				<view class="nav-content-back flex-row-center">
					<text class="left-icon tn-icon-home" v-if="initEenter" @click="gotoHome"></text>
					<uni-icons class="left-icon" type="left" size="24" @click="goBack" v-else></uni-icons>
					
					<view class="left-title">{{title}}</view>
				</view>
				<view v-if="hasSearch" class="my-input flex-row-center" :style="{width:inputWidth+'rpx'}">
					<input :type="searchType" v-model="search" :disabled="readonly" :focus="focus"
						confirm-type="search"
						:placeholder="placeholder" placeholder-class="placeholder" 
						@click="emitClick"
						@input="handleInput"
						@blur="handleBlur"
						@confirm="emitConfirm">
					</input>
					<slot name="searchIcon">
						<uni-icons color="#c0c4cc" size="18" type="search" />
					</slot>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "my-nav-search",
		props: {
			// initEenter:{
			// 	type:Boolean,
			// 	default:false
			// },
			background:{
				type:String,
				default:"#FFFFFF"
			},
			zIndex: {
				type: Number,
				default: 99,
			},
			//标题
			title: {
				type: String,
				default: ""
			},
			//是否带搜索
			hasSearch: {
				type: Boolean,
				default: false
			},
			//搜索内容类型
			searchType: {
				type: String,
				validator: function(value) {
					return ['text', 'number', 'idcard', "digit", "tel", "safe-password", "nickname"].includes(value);
				},
				default: "text"
			},
			//是否只读
			readonly: {
				type: Boolean,
				default: false
			},
			//是否自动聚焦
			focus: {
				type: Boolean,
				default: false
			},
			//搜索框宽度
			inputWidth: {
				type: String,
				default: "330"
			},
			//占位内容
			placeholder: {
				type: String,
				default: "请输入搜索内容"
			}
		},
		data() {
			return {
				topHeight: "",
				navHeight: "",
				search: "",
				initEenter:false
			}
		},
		created() {
			//获取状态栏高度
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			// 获取胶囊按钮信息
			const menuInfo = uni.getMenuButtonBoundingClientRect()
			console.log(menuInfo, "menuInfo")
			this.topHeight = menuInfo.top
			// // 计算导航栏高度=（胶囊底部高度-状态栏的高度）+（状态栏顶部高度-状态栏内的高度）
			// this.navHeight = (menuInfo.bottom - statusBarHeight)+(menuInfo.top - statusBarHeight)
			this.navHeight = menuInfo.height;
			this.$store.commit('set_navBarHeight',this.topHeight+this.navHeight);
			console.log(this.navHeight,this.topHeight,"this.navHeight");
			let pages = getCurrentPages();
			console.log('navvvvvv',pages.length,pages[0].route)
			if(pages.length == 1){
				this.initEenter = true
			} else {
				this.initEenter = false;
			}
		},
		methods: {
			goBack() {
				uni.navigateBack(-1)
				console.log("返回")
			},
			emitClick() {
				this.$emit("turnSearch")
			},
			emitConfirm() {
				console.log("emitConfirm",this.search)
				// this.$emit("conFirmSearch",this.search)
				
			},
			handleInput(val){
				console.log("handleInput",val,this.search)
			},
			handleBlur(val){
				console.log("handleBlur",val,this.search)
				this.$emit("conFirmSearch",this.search)
			},
			setValue(value){
				this.search = value;
			},
			gotoHome(){
				this.$Router.replace({name:'login'})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-box {
		--input-height:64rpx;
		width: 100%;
		position: fixed;
	}

	.nav-content-back {
		margin-right: 20rpx;

		.left-icon {
			width: 48rpx;
			height: 48rpx;
			margin: 2rpx 10rpx 0 10rpx;
			font-size: 48rpx;
		}

		.left-title {
			font-size: 32rpx;
			color: #000000;
			font-weight: $Mediumbold;

		}
	}

	/deep/.placeholder {
		color: $placeholder-color;
		font-size: $text-size;
	}
</style>